<template>
	<view class="hot">
		<!-- 轮播图 -->
       <swiper circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
       	<swiper-item v-for="item,index in hotList.slice(0,5)" :key="index">
       		<view class="swiper-item">
				<image :src="item.img" mode=""></image>
			</view>
       	</swiper-item>        
       </swiper>
	   <!-- 电影列表 -->
	   <view class="list">
		   <view class="title">热映电影</view>
		   <!-- 一个电影 -->
		   <view class="item" v-for="item,index in hotList" :key="index" @tap="toDetails(item.id)">
			   <view class="pic">
				   <image :src="item.img" mode=""></image>
			   </view>
			   <view class="content">
				   <view class="name">{{item.nm}}</view>
				   <view class="cat">类别:{{item.cat}}</view>
				   <view class="dir">导演:{{item.dir}}</view>
				   <view class="act">演员:{{item.star}}</view>
				   <view class="showtime">上映时间:{{item.showTimeInfo}}</view>
				   <view class="info">
					   <view class="sc">评分:{{item.sc}}</view>
					   <view class="wish">{{item.wish}}想看</view>
				   </view>
			   </view>
		   </view>
		   <view class="finish" v-if="!hasMore">
			   我是有底线的..
		   </view>
	   </view>
	</view>
</template>

<script setup>
	import {
		onLoad,onReachBottom
	} from "@dcloudio/uni-app"
	import {
		ref
	} from 'vue'

	onLoad(() => {
		getHot()
	})

   onReachBottom(()=>{
	   
	   console.log("触底了。。。")
	   // 如果还有更多的,那么就触底加载
	   if(hasMore.value)
	   {
		   pageData.page++
		   getHot()
	   }
   })

	//分页工具
	const pageData = {
		page: 1, //页码
		pageSize: 10 //每页数量
	}
	// 是否加载完成
   const hasMore=ref(true)
   // 热映电影列表
   const hotList=ref([])
	async function getHot() {
		let res = await uni.$get("https://wx.maoyan.com/mmdb/movie/v2/list/hot.json", {
			limit: pageData.pageSize,
			offset: (pageData.page - 1) * pageData.pageSize,
			ct: '西安'
		})
		hotList.value=[...hotList.value,...res.data.data.hot]
		hasMore.value=res.data.data.paging.hasMore
		// console.log(hotList.value)
		// console.log(hasMore.value)
	}
	
	// 跳转到详情页面
	function toDetails(id)
	{
		uni.navigateTo({
			url:"/pages/details/details?movieId="+id
		})
	}
</script>

<style lang="scss" scoped>
	.red{
		color: red;
	}
	.green{
		color: green;
	}
	
.hot{
	// 轮播图样式
	swiper{
		height: 220px;
		image{
			width: 100%;
		}
	}
	// 电影列表样式
	.list{
		// 热映电影标题文字
		.title{
			font-size: 30rpx;
			padding: 10px;
		}
		.item{
			display: flex;
			justify-content: space-around;
			border: 1px solid #ccc;
			margin: 5px;
			padding: 5px;			
			.pic{
				width: 200rpx;
				height: 320rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.content{
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				font-size: 26rpx;
				width: 480rpx;
				.name{
					font-size: 30rpx;
					font-weight: bold;
					color:#00557f;
				}
				.info{
					display: flex;
					.sc{
						margin-right: 20px;
					}
				}
			}
			
		}
	    .finish{
			text-align: center;
			margin: 10px;
		}
	}
}


</style>